 <template>
  <div class="BaseRole">
    <!--按钮-->
    <div>
        <el-carousel :interval="2000"  type="card" height="280px">
          <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
          <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
           <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
           <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
           <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
           <el-carousel-item>
            <img src="./cherry8.jpg" class="carousel_image_type">
          </el-carousel-item>
          
          
          <el-carousel-item v-for="item in 0" :key="item">
          <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
    </div>
    <div class="btns" style="text-align:right"> 
      <el-form label-width="40px" inline >
           <el-form-item label="name">
         <el-input placeholder="请输入name" prefix-icon="el-icon-search" v-model="param.name"></el-input>
        </el-form-item>
      <el-row>
        <el-form-item>
          <el-button size="small" type="success" icon="el-icon-search" @click="loadBaseRole">搜索</el-button>
        </el-form-item>

        <el-form-item style="text-align:right" >
          
      <el-button type="warning" size="small" @click="toAddHandler" >新增<i class="el-icon-upload el-icon--right"></i></el-button>
    </el-form-item>
     </el-row>
      </el-form>
    </div>
    <!--/按钮-->
    <!--{{BaseRole}}-->
  
    <!--表格-->
    <el-table size="small" :data="BaseRole">
      <el-table-column label="序号" type="index" :index="1"></el-table-column>
<el-table-column label="名称" prop="name" align="center" width="900px"></el-table-column>
      <el-table-column label="操作" width="120px" align="center"> 
        <!--定制-插槽-->
        <template slot-scope="scope">
           <el-button type="text" size="mini" @click="editHandler(scope.row)" icon="el-icon-edit">修改</el-button>
          <el-button type="text" size="mini" @click="deleteHandler(scope.row)" icon="el-icon-delete-solid">删除</el-button>
        </template>
        <!--/定制-插槽-->
      </el-table-column>
    </el-table>
   
    <!--/表格-->
    <!--模态框-->
    <!--/模态框-->
  </div>
</template>

<script>
import { del,get, post } from "@/utils/request";
export default {
  //页面数据
  data(){
        return{
            param:{},
            BaseRole:[]
             
        }
    },
     //页面渲染时调用的函数
 created(){
        this.loadBaseRole();
    },
    //所有的方法
    methods:{
    //修改事件处理函数
    editHandler(row){
        this.$router.push({
            path:"/BaseRole/create",
            query:row//携带的参数
        })
    },
    //删除事件处理函数
        deleteHandler(row){
             this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let url="http://121.196.106.124:8888/BaseRole/deleteById"
            del(url,{id:row.id}).then(resp =>{
                this.$message({type:"success",message:resp.message});
                this.loadBaseRole();
            })
        })
        },
    //新增跳转
        toAddHandler(){
            this.$router.push("/BaseRole/Create")
        },
    //查询数据
        loadBaseRole(){
            let url='http://121.196.106.124:8888/BaseRole/query'
            get(url,this.param).then((resp)=>{
                this.BaseRole=resp.data;
            })
        }
}
}
  
      
    
  
</script>

<style scoped>

</style>
